<template>
  <div class="map-component">
    <div class="map-left">
      <slot name="mapLeft"></slot>
    </div>
    <!-- <div class="map-right">
      <slot name="mapRight"></slot>
    </div> -->
    <component :is="mapComponent"></component>
  </div>
</template>

<script setup>
import mapComponent from "@/mapbox/main/index.vue";
import { onMounted, ref } from "vue";
import { boundaryLine, getMap, terrainMgrAdd, setCamera } from "@/mapbox/main/index";
import { TianDiTuTerrainURL } from "@/mapbox/mapbox_config/mapConfigManager/index";
import market from "@/assets/json/100000_full.json";
import { defaultBounds } from "@/mapbox/mapbox_config/mapConfigManager/index";

// 航迹数据
import pathData from "./response.json";
const processJsonData = (data) => {
  if (!data || !data.features || !Array.isArray(data.features)) {
    console.error("数据格式不正确，缺少features数组");
    return data;
  }

  data.features.forEach((feature) => {
    if (!feature.properties) {
      feature.properties = {};
    }

    if (
      !feature.properties.centroid &&
      feature.geometry &&
      feature.geometry.coordinates &&
      Array.isArray(feature.geometry.coordinates)
    ) {
      if (
        feature.geometry.type === "Polygon" &&
        feature.geometry.coordinates[0]
      ) {
        feature.properties.centroid = feature.geometry.coordinates[0][0];
      } else if (
        feature.geometry.type === "MultiPolygon" &&
        feature.geometry.coordinates[0] &&
        feature.geometry.coordinates[0][0]
      ) {
        feature.properties.centroid = feature.geometry.coordinates[0][0][0];
      }
    }

    if (!feature.properties.name && feature.properties.NAME) {
      feature.properties.name = feature.properties.NAME;
    } else if (!feature.properties.name) {
      feature.properties.name = "未知";
    }
  });

  return data;
};

onMounted(() => {
  setTimeout(() => {
    try {
      const map = getMap();
      if (!map) {
        console.error("地图未初始化");
        return;
      }

      boundaryLine(map, "market", processJsonData(market));
      // 地形加载
      // terrainMgrAdd(map,"terrain", TianDiTuTerrainURL);

      // 设置地图视图范围默认为中国
      setCamera(map, { bounds: defaultBounds });

    } catch (error) {
      console.error("加载边界时出错:", error);
    }
  }, 500);
});


</script>

<style lang="scss" scoped>
.map-component {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #000;
}

.map-left {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 0px;
  // background-color: aqua;
  left: 0;
  z-index: 1;
  box-sizing: border-box;
  border-radius: 3px;
  padding: 10px;
}


</style>
